<template>
	<div>
		<pub-mask title="线下会面" @close="$emit('close')">
			<div class="xianxia-huimian">
				<uni-forms :modelValue="form" ref="form">
					<uni-forms-item class="history-item" label="讨论主题" name="theme" required :rules="[{ required: true, errorMessage: '请输入讨论主题', trigger: 'blur' }]">
						<uni-easyinput v-model="form.theme" maxlength="15" placeholder="期待与您会面（限15字内）"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item class="history-item" label="会面地点" name="meetingAddress" required :rules="[{ required: true, errorMessage: '请选择会面地点', trigger: 'blur' }]">
						<dict-select v-model="form.meetingAddress" :options="zd.meeting_address" @input="confirmTime(null)" placeholder="请选择"></dict-select>
					</uni-forms-item>
					<uni-forms-item class="history-item" v-if="['exhibition_customization', 'other'].includes(form.meetingAddress)" label="会面地点补充" name="meetingAddressDesc" required :rules="[{ required: true, errorMessage: '请填写详细会面地点', trigger: 'blur' }]">
						<uni-easyinput v-model="form.meetingAddressDesc" placeholder="请补充详细会面地点"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item class="history-item" label="会面日期" name="meetingDate" required :rules="[{ required: true, errorMessage: '请选择会面日期', trigger: 'blur' }]">
						<dict-select v-model="form.meetingDate" :options="zd.meeting_date" @input="confirmTime(null)" placeholder="请选择"></dict-select>
					</uni-forms-item>
					<uni-forms-item v-if="form.meetingAddress && form.meetingDate && timeHour.length" class="history-item" label="会面时间" name="times" required :rules="[{ required: true, errorMessage: '请选择会面时间', trigger: 'blur' }]">
						<div style="position: relative;">
							<dict-select v-model="form.times" :options="timesArr" placeholder="请选择"></dict-select>
							<div @click="selectTime" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;"></div>
						</div>
					</uni-forms-item>
					
				</uni-forms>
				<div v-if="form.meetingAddress && form.meetingDate && !timeHour.length" style="color: red; text-align: center; padding: 20px;">{{ zdToLabel('meeting_address', form.meetingAddress) }}今日不可预约</div>
				<div class="btn" v-if="!(form.meetingAddress && form.meetingDate && !timeHour.length)" @click="submit">确定发送</div>
			</div>
		</pub-mask>
		<wanghexu-timeslot :form="form" ref="timeslot" :title="'选择时间段'" @confirm="confirmTime" @timeHour="setTimeHour">
		</wanghexu-timeslot>
	</div>
</template>

<script>
	// 可预约场地：
	// 展区-休息区
	// 展区-合作洽谈区
	// 餐饮中心
	// 展区-自定义展位（需补充展位信息）
	// 其他非官方场地（需补充非官方场地信息）
	// ---------------------------------------------------
	// 可预约时段：
	// 9月10日 开放预约时段：13:00-17:00，非官方场地随意
	// 9月11日、9月12日、9月13日 开放预约时间段： 9:00-17:00
	// 其中，展区-合作洽谈区9月11日下午13:00-17:00以及9月12日全天不可预约
	// 餐饮中心9月11日-9月13日11-14点不可预约
	// 非官方场地随意
	
	import protal from '@/api/protal.js'
	const initForm = {
		"endTime": "",
		"friendUuid": "",
		"meetingAddress": "",
		"meetingAddressDesc": "",
		"meetingDate": "",
		"startTime": "",
		"theme": "",
		"times": ''
	}
	export default {
		props: {
			personUuid: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				form: JSON.parse(JSON.stringify(initForm)),
				times: '',
				timesArr: [],
				timeHour: []
			}
		},
		methods: {
			setTimeHour(v) {
				this.timeHour = v
			},
			selectTime() {
				this.$refs.timeslot.open()
			},
			confirmTime(v) {
				console.log(v, 3333)
				if (v && v.start) {
					this.form.startTime = `${ v.start.hour }:${ v.start.min }`
					this.form.endTime = `${ v.end.hour }:${ v.end.min }`
					this.form.times = `${ this.form.startTime }-${ this.form.endTime }`
					this.timesArr = [{
						value: this.form.times,
						text: this.form.times
					}]
				} else {
					this.form.startTime = ''
					this.form.endTime = ''
					this.form.times = ''
					this.timesArr = []
				}
			},
			submit() {
				this.$refs.form.validate(valid => {
					if (!valid) {
						const params = {
							"endTime": this.form.endTime,
							"friendUuid": this.personUuid,
							"meetingAddress": this.form.meetingAddress,
							"meetingAddressDesc": this.form.meetingAddressDesc,
							"meetingDate": this.form.meetingDate,
							"startTime": this.form.startTime,
							"theme": this.form.theme,
						}
						protal.applyOfflineMeeting(params).then(res => {
							if (res.code === '0000') {
								this.$emit('success', res.data)
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.xianxia-huimian {
		padding: 28px 0 20px;

		.btn {
			width: 170px;
			height: 38px;
			background: #7350F5;
			border-radius: 20px;
			font-family: AlibabaPuHuiTi_3_65_Medium;
			font-size: 16px;
			color: #FFFFFF;
			line-height: 23px;
			text-align: left;
			font-style: normal;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 40px auto 0;
		}
	}
</style>